<script lang="ts" setup>
//阅读
import { IndexShowData } from "@/api/interface";
import useGetData from "@/store/get";
import useStatus from "@/store/status";
import Image from "@/components/Black/Image.vue";
import Single from "@/components/Index/Single.vue";
import { ref, computed, watch, watchEffect } from "vue";
import { Plus } from "@element-plus/icons-vue";
// 实例化 store
const store = useGetData();
const status = useStatus();
interface Props {
  data: IndexShowData;
}

const props = defineProps<Props>();
//存储文章数据
const postData = ref();
//拿到完整内容并传递给子组件
//watch(
//  () => props.data,
//  async (newVal) => {
//    //拿到当前文章ID
//    const id = newVal.id;
//    const arr = [id];
//    //拿到文章数据
//    postData.value = await store.packagePostData(arr);
//    console.info("我执行了");
//  }
//);
watchEffect(async () => {
  const id = props.data.id;
  const arr = [id];
  //拿到文章数据
  const data = await store.packagePostData(arr);
  postData.value = data[0];
  console.info("我执行了");
});

//控制文章展示状态
const active = computed(() => {
  return status.index.post;
});
//按钮点击方法
const btnClick = () => {
  //更改状态
  status.changeIndexPost();
  //添加样式，去除滚动条
  document.body.className = "page-article has-modal";
  //准备配置数据
  store.GetOptionData();
};

let swt = false;
const touch = () => {
  swt = !swt;
  //添加样式，去除滚动条
  document.body.className = "page-article has-modal";
  //准备配置数据
  store.GetOptionData();
};

//图片配置
const configImg = {
  small: "thumbnail", //150
  medium: "thumbnail", //150
  large: "thumbnail", //150
};
</script>
<template>
  <template v-if="data">
    <!--文章遮罩-->
    <Transition name="fade">
      <div v-if="active">
        <Single :data="postData"></Single>
      </div>
    </Transition>

    <button class="tile tile-2up" @click="btnClick">
      <div class="chiclet tile-quick-read-image">
        <Image :data="data.image" :config="configImg"></Image>
      </div>
      <div class="tile__description">
        <div class="tile-description-content-container">
          <div class="tile__head" style="text-align: left">
            <div class="tile__category">
              <span v-for="key in data.cat">
                {{ key.name }}
              </span>
            </div>
            <div class="tile__headline">{{ data.title }}</div>
          </div>
          <div class="tile__timestamp">{{ data.date }}</div>
        </div>
        <div class="nr-cta-open">
          <el-button :icon="Plus" circle color="#f5f5f7" size="large">
          </el-button>
        </div>
      </div>
    </button>
  </template>
  <template v-else> 加载中 </template>
</template>
<style lang="less" scoped>
.tile-2up {
  position: relative;

  padding: 58px;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  width: 100%;

  border: 0px;
  .tile-quick-read-image {
    flex-shrink: 0;
  }
  .tile__description {
    margin-left: 58px;
    flex-shrink: 1;
  }
  .tile-description-content-container {
    padding-right: 42px;
  }
  .tile__category {
    margin-bottom: 12px;
  }
  .tile__headline {
    font-size: 32px;
    line-height: 1.125;
    font-weight: 700;
    letter-spacing: 0.004em;
    font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .tile__timestamp {
    margin-top: 16px;
  }
}

.chiclet {
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  height: 150px;
  border-radius: 32px;
  overflow: hidden;
}

.tile__description {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 1;
}
.tile-description-content-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.tile__category {
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 700;
}

//按钮
.nr-cta-open {
  bottom: 24px;
  height: 44px;
  position: absolute;
  width: 44px;
  right: 24px;
  button {
    font-size: 21px;
    color: #6e6e73;
  }
}
@media only screen and (max-width: 1068px) {
  .tile-2up {
    padding: 39px;
    .tile__description {
      margin-left: 39px;
    }
    .tile-description-content-container {
      padding-right: 53px;
    }
    .tile__category {
      margin-bottom: 8px;
    }
    .tile__headline {
      font-size: 21px;
      line-height: 1.19048;
      font-weight: 700;
      letter-spacing: 0.011em;
    }
    .tile__timestamp {
      margin-top: 12px;
    }
  }
  .chiclet {
    width: 110px;
    height: 110px;
    border-radius: 24px;
  }
  //.tile-2up {
  //  cursor: pointer;

  //  flex-direction: column;
  //  width: 472px;
  //  .tile-description-content-container {
  //    padding-right: calc(44px + 24px);
  //  }
  //  .tile__description {
  //    padding: 32px;
  //    justify-content: space-between;
  //    flex-basis: auto;
  //  }
  //  .tile-quick-read-image {
  //    margin: 74px auto calc(74px - 32px);
  //  }
  //  .tile__category {
  //    margin-bottom: 8px;
  //  }
  //  .tile__headline {
  //    font-size: 24px;
  //    line-height: 1.16667;
  //    font-weight: 700;
  //    letter-spacing: 0.009em;
  //    font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC",
  //      "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  //    -webkit-line-clamp: 6;
  //    -webkit-box-orient: vertical;
  //    display: -webkit-box;
  //    overflow: hidden;
  //  }
  //  .tile__timestamp {
  //    margin-top: 12px;
  //  }
  //}
}
@media only screen and (max-width: 734px) {
  .tile-2up {
    flex-direction: column;
    padding: 0;
    .tile-quick-read-image {
      margin-top: 57px;
    }
    .tile__description {
      margin-left: 0;
      margin-top: 57px;
      padding: 0 24px 24px 24px;
    }
    .tile-description-content-container {
      padding-right: 68px;
    }
    .tile__headline {
      font-size: 19px;
      line-height: 1.21053;
      font-weight: 700;
      letter-spacing: 0.012em;

      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }
    .tile__timestamp {
      margin-top: 8px;
    }
  }
}

//show切换动画
.fade-leave,   // 离开前,进入后透明度是1
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 0.5s; //过度是2秒
}
.fade-leave-to,
.fade-enter {
  opacity: 0;
}
</style>
